<!-- Ana Luisa Figón Treviño -->
<html>
	<head>
		<meta charset='utf-8'>
		<title>Cat Walk</title>
	</head>
	<body>
		<img id='image' style='position:absolute;' src="http://www.anniemation.com/clip_art/images/cat-walk.gif">
		<script type="text/javascript">

			var image = document.getElementById('image');
			var gatocaminando =  "http://www.anniemation.com/clip_art/images/cat-walk.gif";
			var gatobailarin='http://25.media.tumblr.com/14406fb11346aaa3cde5613e54ce2e59/tumblr_mhcwcr4oC51qgtfzjo1_250.gif';

			image.style.left = '0px';
			image.style.top = '0px';
			var caminando = true;
			var subiendo = true;
			var b = false;
			var c = true;
			var contador = 0;
			var contador1 = 0;
			var mitad = 0;


			function catWalk(){
				var izquierda = parseInt(image.style.left);
				var arriba = parseInt(image.style.top);

				if (b){
  					if (subiendo && (arriba > (window.innerHeight-image.height))){
    					subiendo = false;
  					}
  					if (!subiendo && (arriba <= 0)) {
    					subiendo = true;
    					contador1 ++;
    					if (contador1 == 5){
    						contador = 0;
    						b = false;
    						c = true;
    						image.src = gatocaminando;
    					}
  					}

					if (subiendo) {
    					image.style.top = (arriba + 10) + 'px';
  					} else {
    					image.style.top = (arriba - 10) + 'px';
  					}
  				}

  				if (c) 
  				{  					
  					if (caminando && (izquierda > (window.innerWidth-image.width))) {
    					caminando = false;
  					}
  					if (!caminando && (izquierda <= 0)) {
    					caminando = true;
    					contador ++;
    					if (contador == 5){
    						b = true;
    						c = false;
    						contador1 = 0;
    						image.src = gatobailarin;
    					}
  					}
  
  					if (caminando) {
    					image.style.left = (izquierda + 10) + 'px';
  					} else {
    					image.style.left = (izquierda - 10) + 'px';
  					}
  				} 			
			}

			window.setInterval(catWalk, 50);
		</script>
	</body>
</html>
